<template>
  <com-page class="com-spacing com-color-content-bg">
    <view class="com-text-right com-p-y-md" @click="$utils.router({ type: 'back' })">关闭</view>
    <view class="com-text-28 com-mt-lg">欢迎登录</view>

    <view class="com-pt-xxl">
      <view class="com-mt-xxl com-flex com-justify-between">
        <text>手机号或邮箱</text>
        <text class="com-color-link" @click="changeType">{{ !isPhoneLogin ? '验证码登陆' : '手机号登陆' }}</text>
      </view>
      <view class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_login_components_app-login_desc_5a2b754b')" v-model="form.phone" type="text" border="none" clearable />
      </view>
      <view class="com-mt-xxl com-flex com-justify-between">
        <text>{{ !isPhoneLogin ? '验证码' : '登陆密码' }}</text>
      </view>
      <view v-if="isPhoneLogin" class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_login_components_app-login_msg_e39ffe99')" v-model="form.password" border="none" :password="!isShowPassword" clearable>
          <com-icon :name="isShowPassword ? 'eye' : 'eye-off'" @click="onSetEyeHide" slot="suffix" />
        </u-input>
      </view>
      <view v-if="!isPhoneLogin" class="com-mt-sm com-color-info-light-bg com-spacing com-rounded-sm">
        <u-input :placeholder="$t('pages_account_forget_forget_msg_d0c06a0d')" v-model="form.code" border="none" type="number" clearable>
          <view class="com-color-tips" @click="onSendCode" slot="suffix">{{
            countdown === 0 ? '获取验证码' : countdown + '后重新获取'
          }}</view>
        </u-input>
      </view>
    </view>

    <view class="com-mt-sm com-text-sm com-flex com-justify-between">
      <view @click="$utils.router('../register/register')">
        <text>没有账号？</text>
        <text>立即注册</text>
      </view>
      <view @click="$utils.router('../forget/forget')">忘记密码</view>
    </view>

    <u-button type="primary" class="com-mt-xxl" @click="onSubmit">确认登陆</u-button>
    <view class="com-text-center com-text-sm com-mt-md">
      <text>登陆即代表您已同意</text>
      <text class="com-color-link">《用户协议》</text>
    </view>

    <view class="com-mt-xxl com-pt-xxl">
      <u-divider :text="$t('pages_account_login_components_app-login_msg_7a820997')" />
      <view class="com-text-center">
        <com-icon-colored name="wechat" size="36" />
      </view>
    </view>
  </com-page>
</template>

<script>
export default {
  name: 'App-Login',
  data() {
    return {
      form: {},
      isShowPassword: false,
      isPhoneLogin: true,
      countdown: 0,
    }
  },
  methods: {
    async onSubmit() {
      if (!this.form.phone) {
        return this.$utils.toast(this.$t('pages_account_login_components_app-login_desc_5a2b754b'))
      }
      if (!this.form.password && this.isPhoneLogin) {
        return this.$utils.toast(this.$t('pages_account_login_components_app-login_desc_70ae6942'))
      }
      if (!this.form.code && !this.isPhoneLogin) {
        return this.$utils.toast(this.$t('pages_account_forget_forget_msg_d0c06a0d'))
      }
      const res = await this.$api.user.login({
		"mobile": this.form.phone,
		"password": this.form.password,
	  })
	  this.$store.dispatch('setToken', res['token'])
	  this.$utils.toast(this.$t('pages_account_login_components_app-login_msg_71fa3bd0'));
	  const info = await this.$api.user.getInfo()
	  this.$store.dispatch('setUserInfo', info)
	  setTimeout(() => {
	    this.$utils.router({ type: 'back' })
	  }, 1500)
    },
    onSetEyeHide() {
      this.isShowPassword = !this.isShowPassword
    },
    changeType() {
      this.isPhoneLogin = !this.isPhoneLogin
    },
    onSendCode() {
      if (this.countdown === 0) {
        this.countdown = 60
        setInterval(() => {
          this.countdown -= 1
        }, 1000)
      }
    },
  },
}
</script>

<style scoped lang="scss"></style>
